
import React, { useEffect, useState } from "react";

import img from "../../assets/images/search-bg.jpg"
import logo from "../../assets/images/logo.jpg"
import styles from "./DetailPage.module.css";
import { Button, Divider, Radio, Tabs, Typography } from "antd";
import { PhoneOutlined } from "@ant-design/icons";
import { useNavigate, useLocation } from "react-router-dom"
import axios from "axios";
import info from "../../assets/images/info.png"
export const DetailPage: React.FC = (props: any) => {
  const navigate = useNavigate();
  const { state } = useLocation();

  const list1 = [1, 2, 3, 4, 5]

  console.log(state)
  const [list, setList] = useState<Array<any>>([])
  const [product, setProduct] = useState<any>({})
  const [detailList, setDetailList] = useState<Array<any>>([])
  useEffect(() => {
    if (state.id) {
      axios.post('http://42.193.113.4:9091/v1/detail?id=' + state.id, {

      })
        .then((response: any) => {
          console.log(response)
          if (response.data.code === 20000) {
            const { product, detailList } = response.data.data
            setDetailList(detailList)
            setProduct(product)
          }
        })
        .catch((error) => {
          console.log(error);
        });
    }
  }, [])

  const items = detailList.map((item, i) => {
    const id = String(i + 1);
    return {
      label: item.title,
      key: id,
      children: (
        <div dangerouslySetInnerHTML={{ __html: item.content }}>

        </div>
      ),
    };
  });


  const goBack = () => {
    console.log("0")
    navigate("/")
  }
  return (
    <div className={styles["detail-item"]}>
      <div className={styles["top-header"]}>
        <div className={styles.inner}>
          <Radio.Button value="large" style={{ marginRight: "20px" }} onClick={() => { goBack() }}>返回首页</Radio.Button>
          <Typography.Text>商品详情</Typography.Text>
        </div>
      </div>
      <div className={styles["header-content"]}>
        <div>
          <img className={styles["logo"]} src={logo}></img>
        </div>
        <div>
          <div>
            <Divider>一站式服务品质创意团队服务商</Divider>
          </div>
          <div>定制 <Divider type="vertical" />创意 <Divider type="vertical" />体验</div>
        </div>
        <div className={styles["phone-cxt"]}>
          <PhoneOutlined style={{ fontSize: "54px", color: "#52c41a" }} />
          <div className={styles["phone-num"]}>
            <div>咨询热线：</div>
            <div>18629429514</div>
          </div>
        </div>
      </div>
      <div className={styles["top-content"]}>
        <img className={styles["image"]} src={img}></img>
      </div>
      <div className={styles["detail-box"]}>
        <div className={styles['detail-info-box']}>
          <img className={styles['detail-img']} src={info}></img>
          <div className={styles["info-detail"]}>
            <div className={styles['info-title']}>{product.name}</div>
            <div className={`${styles.tag}`}>

              {/* {
                product.label.split(",").map((items, index) => {
                  return <span key={index} className={`${styles['tag-box']}`}>{items}</span>
                })
              } */}
            </div>
            <div className={styles['info-desc']}>
              <div className={styles['flex']}>
                <div className={styles['mr-10']}>
                  项目类型
                </div>
                <div>
                  {product.label}
                </div>
              </div>
              <div className={styles['flex']}>
                <div className={styles['mr-10']}>
                  适合团队
                </div>
                <div>
                  {product.team}
                </div>
              </div>
              <div className={`${styles.flex} ${styles.flex1}`}>
                <div className={`${styles['mr-10']}`}>
                  推荐理由
                </div>
                <div className={`${styles.flex1}`}>
                  {product.reason}</div>
              </div>
            </div>
            <Button type="primary" className={styles['custom-btn']}>在线咨询</Button>
          </div>
        </div>
      </div>
      <div className={`${styles.green} ${styles.all}`}>
        <Tabs
          type="card"
          className={styles['tabs-box']}
          defaultActiveKey="1"
          style={{ marginBottom: 32 }}
          items={items}
        />
      </div>

    </div>
  )
}